/**
 * Created by michael on 2015-02-21.
 */
var elem = document.getElementById('canvas'),
    elemHeight = elem.offsetHeight;
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];
elem.width = 800;
elem.height = 600;
var runAnimation = {
        value: false
    };

//window.requestAnimFrame = (function(callback) {
//    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
//        function(callback) {
//            window.setTimeout(callback, 1000 / 60);
//        };
//})();

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;
    console.log(x, y);
    // Change the for each because it will trigger for each elements it as.

        if (y > elements[0].top && y < elements[0].top + elem.height && x > elements[0].left && x < elements[0].left + elem.width) {
            alert('clicked an element');
            var date = new Date();
            var time = date.getTime();
            animate(elements[0]);
        }
        else if (y > 50 && y < (50 + 50) && x > 55 && x < (55 + 50)) {
            alert('clicked second element');

        }
        

});

//function animate(lastTime, element, runAnimation, canvas, context) {
//
//    if(runAnimation.value) {
//        // update
//        var time = (new Date()).getTime();
//        var timeDiff = time - lastTime;
//
//        // pixels / second
//        var linearSpeed = 100;
//        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
//        var currentX = element.width;
//        console.log(currentX);
//        //if(currentX < canvas.width - element.width - element.borderWidth / 2) {
//            var newX = currentX + linearDistEachFrame;
//
//        console.log(element.width,element.left);
//
//        //}
//
//        // clear
//        context.clearRect(0, 0, canvas.width, canvas.height);
//
//        // draw
//        drawRect(element, context);
//
//        // request new frame
//        requestAnimFrame(function() {
//            animate(time, element, runAnimation, canvas, context);
//        });
//    }
//}

// Add element.
elements.push(

    {colour: 'red',
        width: 400,
        height: (elem.height/6),
        top: 0,
        left: 0,
        borderWidth: 5}

    ,{colour: 'blue',
        width: 800,
        height: (elem.height/6),
        top: ((elem.height/6) *1),
        left: 0,
        borderWidth: 5}

    ,{colour: 'green',
        width: 800,
        height: (elem.height/6),
        top: ((elem.height/6)*2),
        left: 0,
        borderWidth: 5}

    ,{colour: 'teal',
        width: 800,
        height: (elem.height/6),
        top: ((elem.height/6)*3),
        left: 0,
        borderWidth: 5}

    ,{colour: 'yellow',
        width: 800,
        height: (elem.height/6),
        top: ((elem.height/6)*4),
        left: 0,
        borderWidth: 5}

    , {colour: 'pink',
        width: 800,
        height: (elem.height/6),
        top: ((elem.height/6)*5),
        left: 0,
        borderWidth: 5});

// Render elements.


function animate(element) {

    reqAnimFrame = window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame
    ;

    reqAnimFrame(animate);

    while (elements[0].height < elem.height || elements[0].top > 0) {

        if (elements[0].height < elem.height) {

            elements[0].height += 100;
        }
        if(elements[0].top > 0){
            elements[0].top -= 1;
        }

        draw();
    }
    console.log("element.height : " + elements[0].height + "    elemHeight : " +elem.height + "     element.top : " +elements[0].top +  "    elemTop : " + 0)

    draw();
}


function draw() {
    elements.forEach(function(element) {
        context.fillStyle = element.colour;
        context.fillRect(element.left, element.top, element.width, element.height);
    });
}

draw();
//animate();